
<template>
  <el-form
    ref="passwordForm"
    :model="form"
    :size="size"
    :rules="rules"
    :label-suffix="labelSuffix"
    :label-position="labelPosition"
    :label-width="labelWidth"
    @submit.native.prevent
  >
    <el-form-item
      ref="formInput.password"
      label="新密码"
      prop="password"
      class="form-item--medium"
    >
      <el-input
        v-model="form.password"
        type="password"
        show-password
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item
      ref="formInput.password_repeat"
      label="确认新密码"
      prop="password_repeat"
      class="form-item--medium"
    >
      <el-input
        v-model="form.password_repeat"
        type="password"
        show-password
        autocomplete="off"
      />
    </el-form-item>
    <slot name="action">
      <form-action v-if="actionVisible">
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >{{ submitButtonText }}</el-button>
        </el-form-item>
      </form-action>
    </slot>
  </el-form>
</template>

<script>
import FormAction from '@/components/Form/FormAction'
export default {
  name: 'UpdatePasswordForm',
  components: {
    FormAction
  },
  props: {
    primaryKey: {
      type: [String, Number],
      default: 0
    },
    labelPosition: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '20%'
    },
    labelSuffix: {
      type: String,
      default: '：'
    },
    size: {
      type: String,
      default: 'small'
    },
    submitButtonText: {
      type: String,
      default: '提交保存'
    },
    actionVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'))
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('checkPass')
    //     }
    //     callback()
    //   }
    // }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        password: '',
        password_repeat: ''
      },
      rules: {
        password: [
          {
            required: true,
            message: '请输入新的密码',
            trigger: 'blur'
          }
          // {
          //   pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
          //   message: '密码为数字、小写字母、大写字母、特殊符号 至少包含三种，长度为 8 - 30位'
          // }
        ],
        password_repeat: [
          // {
          //   required: true,
          //   message: '请再次输入新密码确认',
          //   trigger: 'blur'
          // },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log('on mounted form')
  },
  methods: {
    onSubmit() {
      this.$refs.passwordForm.validate((valid, obj) => {
        if (valid) {
          console.log(this.form)
          this.$http.passport.reset(this.form).then(res => {
            this.$emit('submit', res.data)
          })
        } else {
          let firstErrorElname = ''
          for (const i in obj) {
            firstErrorElname = `formInput.${i}`
            break
          }
          var dom = this.$refs[firstErrorElname]
          console.log(dom, this.$refs)
          if (dom) {
            dom.$refs.input && dom.$refs.input.focus()
            dom.$el.scrollIntoView({
              // 滚动到指定节点
              block: 'center', // 值有start,center,end，nearest，当前显示在视图区域中间
              behavior: 'smooth' // 值有auto、instant,smooth，缓动动画（当前是慢速的）
            })
          }
          console.log('error submit!!', this.form)
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss">
.brand-upload {
  &__thumb,
  &__cover {
    .upload-square {
      background: #f2f3f7;
    }
  }
}
</style>
